<template>
    <div class="app-container">
        <el-form :model="queryParams" size="mini" ref="queryForm" :inline="true" v-show="showSearch"
            label-width="130px">
            <el-form-item label="学号" prop="stuNo">
                <el-input v-model="queryParams.stuNo" placeholder="请输入学号" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="学生姓名" prop="stuName">
                <el-input v-model="queryParams.stuName" placeholder="请输入学生姓名" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <!-- <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['leave:apply:add']">新增</el-button> -->
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="#" align="center" prop="id" />
            <el-table-column label="学号" align="center" prop="stuNo" />
            <el-table-column label="姓名" align="center" prop="stuName" />
            <el-table-column label="申请时间" align="center" prop="applyTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.applyTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="申请状态" align="center" prop="applyStatus">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.leave_apply_status" :value="scope.row.applyStatus" />
                </template>
            </el-table-column>
            <el-table-column label="开始时间" align="center" prop="startTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="结束时间" align="center" prop="endTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-view" @click="lookVClick(scope.row)">查看</el-button>
                    <!-- <el-button size="mini" type="text" icon="el-icon-download"
                        @click="exportParentKnow(scope.row)">生成家长知情同意书
                    </el-button>
                    <el-button size="mini" type="text" icon="el-icon-download" @click="exportHoliday(scope.row)">
                        生成假期请假条
                    </el-button>
                    <el-button size="mini" type="text" icon="el-icon-download" @click="exportCourse(scope.row)">
                        下载课程请假条
                    </el-button> -->
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

        <el-dialog title="查看" :visible.sync="lookV" width="70%" :close-on-click-modal="false">
            <el-form class="lookForm" size="mini" :model="lookForm" ref="lookForm" label-width="120px">
                <el-form-item label="学号" prop="stuNo">
                    <el-input v-model="lookForm.stuNo" readonly />
                </el-form-item>
                <el-form-item label="姓名" prop="stuName">
                    <el-input v-model="lookForm.stuName" readonly />
                </el-form-item>
                <el-form-item label="年级" prop="grade">
                    <el-input v-model="lookForm.grade" readonly />
                </el-form-item>
                <el-form-item label="专业" prop="major">
                    <el-input v-model="lookForm.major" readonly />
                </el-form-item>
                <el-form-item label="班级" prop="className">
                    <el-input v-model="lookForm.className" readonly />
                </el-form-item>
                <el-form-item label="开始日期" prop="startTime">
                    <el-input v-model="lookForm.startTime" readonly />
                </el-form-item>
                <el-form-item label="结束日期" prop="endTime">
                    <el-input v-model="lookForm.endTime" readonly />
                </el-form-item>
                <el-form-item label="去向地" prop="toAddr">
                    <el-input v-model="lookForm.toAddr" type="textarea" readonly />
                </el-form-item>
                <el-form-item label="家长姓名" prop="parentName">
                    <el-input v-model="lookForm.parentName" readonly />
                </el-form-item>
                <el-form-item label="本人承诺" prop="commit">
                    <el-input v-model="lookForm.commit" type="textarea" readonly />
                </el-form-item>
                <el-form-item label="本人联系电话" prop="phone">
                    <el-input v-model="lookForm.phone" readonly />
                </el-form-item>
                <el-form-item label="去向地联系人" prop="toPeople">
                    <el-input v-model="lookForm.toPeople" readonly />
                </el-form-item>
                <el-form-item label="去向地联系电话" prop="toPhone">
                    <el-input v-model="lookForm.toPhone" readonly />
                </el-form-item>

                <el-form-item label="驳回理由" v-if="!isEmpty(lookForm.returnMsg)">
                    <el-input v-model="lookForm.returnMsg" readonly />
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>
<script>
import { listFdyAll as getList, exportParentKnow } from "@/api/leave/leaveApply";

import { fullLoading, isEmpty } from "@/api/helpFunc/index";

export default {
    name: "leave-fdy",
    dicts: ['leave_apply_status'],
    data() {
        return {
            isEmpty,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            total: 0,

            tableData: [],

            lookForm: {},
            lookV: false,

        }
    },
    created() {
        this.getList();
    },
    methods: {
        async exportCourse(row) {
            this.download('/leave/apply/exportCourse/' + row.id, {
            }, `课程请假条_${new Date().getTime()}.docx`)
        },
        async exportHoliday(row) {
            this.download('/leave/apply/exportHoliday/' + row.id, {
            }, `假期请假条_${new Date().getTime()}.docx`)
        },
        async exportParentKnow(row) {
            this.download('/leave/apply/exportParentKnow/' + row.id, {
            }, `家长知情同意书_${new Date().getTime()}.docx`)
        },
        reset() {
            this.form = {};
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },

        async getList() {
            let loading = fullLoading(this);
            let res = await getList(this.queryParams);
            loading.close();
            if (res.code == 200) {
                this.total = res.total;
                this.tableData = [...res.rows];
            }
        },

        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        lookVClick(row) {
            this.lookForm = {};
            this.lookForm = { ...row };
            this.lookV = true;
        },
    }
}

</script>
<style scoped lang="scss">
.lookForm {
    .el-form-item {
        margin-bottom: 5px;
    }
}
</style>